<template>
  <view class="container">
    <!-- 头部搜索区 -->
    <view class="search-bar">
      <view class="search-box" @tap="toSearchPage">
        <image src="@/static/images/icon/search.png" class="search-img" />
        <text class="sear-input">
          搜索您想要的商品
        </text>
      </view>
    </view>
    <!-- 滚动内容区 -->
    <view class="main">
      <!-- 左侧菜单start -->
      <scroll-view scroll-y="true" class="leftmenu">
        <view v-if="schoolList && schoolList.length">
          <block v-for="(item, index) in schoolList" :key="index">
            <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '" @tap="onMenuTab(item, index)"
              :title="item.name">
              {{ item.name }}
            </view>
          </block>
        </view>
        <view class="ca-empty" v-else>暂无学校列表</view>
      </scroll-view>
      <!-- 左侧菜单end -->
      <!-- 右侧内容start -->
      <scroll-view scroll-y="true" class="rightcontent">
        <!-- <view class="adver-map">
          <view class="item-a">
            <image
              :src="util.checkFileUrl(categoryImg)"
              mode="widthFix"
            />
          </view>
        </view> -->
        <!-- 子分类 -->
        <scroll-view class="classify" scroll-x="true" v-if="subCategoryList.length">
          <view class="th-cate-con">
            <view class="sub-category-name" :class="{ 'active' : cIndex == index}"
              v-for="(item, index) in subCategoryList" :key="index" :data-categoryid="item.id"
              :data-parentid="parentId" @tap="toCatePage(item, index)">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
        <!-- 商品 -->
        <view class="sub-goods" v-if="goodsList && goodsList.length">
          <view class="sub-goods-item" v-for="(goods, index) in goodsList" :key="index" @tap="toProdPage(goods)">
            <view class="sub-goods-pic" >
              <image :src="goods.logo" mode="widthFix" />
            </view>
            <view class="sub-goods-info">
              <view class="sub-goods-name">{{ goods.name }}</view>
              <view class="flex flex-row-between">
                <!-- <button class="buy"  @tap="onBuy">购买</button> -->
                <view class="price">
                  <text class="symbol">￥</text>
                  <text class="big-num">{{ wxs.parsePrice(goods.price)[0] }}</text>
                  <text class="small-num">.{{ wxs.parsePrice(goods.price)[1] }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="goods-empty" v-else>暂无商品列表</view>
      </scroll-view>
      <!-- 右侧内容end -->
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'
const wxs = number()
const schoolList = ref([])
const categoryList = ref([])
const subCategoryList = ref([])
// const categoryImg = ref('')
const parentId = ref('')
const selIndex = ref(0)
const cIndex = ref(0)
const classfiyId = ref('')
const goodsList = ref([])
/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  init()
})

const init = async () => {
  // 加载学校、分类、商品列表
  const res = await http.request({
    url: '/xcx/schoolList',
    method: 'POST',
    data: {}
  })
  const ret = await http.request({
    url: '/xcx/classfiyList',
    method: 'POST',
    data: {}
  })
  if (res?.data?.key == 0 && ret?.data?.key == 0) {
    schoolList.value = res?.data?.result.filter(m => m.id > 0);
    parentId.value = selIndex.value == 0 ? schoolList.value[0]?.id ?? "" : parentId.value
    subCategoryList.value = ret?.data?.result ?? []
    classfiyId.value = cIndex.value == 0 ? subCategoryList.value[0]?.id ?? "" : classfiyId.value
    getGoodsList()
  }
}
onShareAppMessage(() => {
  return {
    title: "元集校服"
  }
})
/**
 * 加载学校列表
 */
const getSchoolList = () => {
  http.request({
    url: '/xcx/schoolList',
    method: 'POST',
    data: {}
  }).then(({
    data
  }) => {
    schoolList.value = data.result ?? []
    parentId.value = schoolList.value[0]?.id
    getProdList(parentId.value)
  })
}
/**
 * 分类点击事件
 */
const onMenuTab = (e, index) => {
  parentId.value = e.id
  selIndex.value = index
  init()
}

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

const getClassifyList = (id) => {
  // 加载分类列表
  http.request({
    url: '/xcx/classfiyList',
    method: 'POST',
    data: {
      id: id
    }
  }).then(({data}) => {
    subCategoryList.value = data?.result ?? []
    subCategoryList.value?.map((m, index) => {
      m.goodsList = []
      getGoodsList(m.id, index)
    })
  })
}

const getGoodsList = () => {
  // 加载商品列表
  http.request({
    url: '/xcx/goodsList',
    method: 'POST',
    data: {
      schoolId: parentId.value,
      classfiyId: classfiyId.value
    }
  }).then(({ data}) => {
    goodsList.value = data?.result ?? []
  })
}
/**
 * 分类商品页面
 */
const toCatePage = (e, index) => {
  // const { categoryid } = e.currentTarget.dataset
  // uni.navigateTo({
  //   url: `/pages/sub-category/sub-category?parentId=${parentId.value}&categoryId=${categoryid}`
  // })
  cIndex.value = index
  classfiyId.value = e.id
  getGoodsList()
}
/**
 * 分类商品页面
 */
const toProdPage = (e) => {
  // uni.setStorageSync("goodsData",e)
  uni.navigateTo({
    url: '/pages/prod/prod?id=' + e.id
  })
}
const onBuy = () => {

}

</script>

<style scoped lang="scss">
@use "./category.scss";
</style>
